<script>
/**
 * @desc 时间簿
 */

import { mapState } from 'vuex'
import LoadingComp from '@/components/loading'
import TheBottomTabs from '@/components/the-bottom-tabs'
import DayBillList from '@/components/day-bill-list'
import CalendarView from '@/components/calendar-view'
import MonthLayer from './month-layer'

const today = new Date()

export default {
  name: 'book',

  components: {
    LoadingComp,
    TheBottomTabs,
    DayBillList,
    CalendarView,
    MonthLayer
  },

  data: () => ({
    showLoading: true,
    showContent: false,
    showMonthLayer: false,
    today: new Date(),
    currDay: new Date(
      today.getFullYear(),
      today.getMonth(),
      today.getDate()
    ).getTime()
  }),

  computed: {
    ...mapState(['systemInfo']),
    ...mapState('TheBook', ['table']),

    year() {
      return new Date(this.currDay).getFullYear()
    },

    month() {
      return new Date(this.currDay).getMonth()
    },

    list() {
      const list = this.table.filter(v => {
        const day = new Date(v.date)
        const today = new Date(this.currDay)
        return (
          day.getFullYear() === today.getFullYear() &&
          day.getMonth() === today.getMonth() &&
          day.getDate() === today.getDate()
        )
      })
      return list
    }
  },

  methods: {
    onDateClick(date) {
      this.currDay = date
    },
    onToggleMonthLayer() {
      this.showMonthLayer = !this.showMonthLayer
    },
    onMonthClick(year, month) {
      this.currDay = new Date(year, month, 1).getTime()
      this.showMonthLayer = false
    }
  },

  mounted() {
    const contentTimer = setTimeout(() => {
      this.showContent = true
      clearTimeout(contentTimer)
    }, 1000)
    const loadingTimer = setTimeout(() => {
      this.showLoading = false
      clearTimeout(loadingTimer)
    }, 2000)
  }
}
</script>

<template>
  <div name="main-container">
    <div
      :class="$sty.container"
      v-show="showContent"
    >
      <div
        :style="{height:systemInfo.statusBarHeight+'px'}"
        name="system-status-bar"
      ></div>

      <div
        :class="$sty.topBar"
        @click="onToggleMonthLayer()"
      >
        <p>{{year}}年</p>
        <p :class="$sty.monthText">{{month+1}}月</p>
      </div>

      <scroll-view
        :class="$sty.scrollView"
        :scroll-y="true"
      >
        <div :class="$sty.calendarContainer">
          <div :class="$sty.calendarWrap">
            <calendar-view
              :currDate="currDay"
              :month="month"
              :onClick="onDateClick"
              :small="false"
              :year="year"
            />
          </div>
        </div>

        <div
          :class="$sty.list"
          v-if="!!list.length"
        >
          <day-bill-list
            :list="list"
            :type="0"
          />
        </div>
      </scroll-view>

      <month-layer
        :onClose="onToggleMonthLayer"
        :onMonthClick="onMonthClick"
        :show="showMonthLayer"
      />

      <the-bottom-tabs/>
    </div>

    <loading-comp :show="showLoading"/>
  </div>
</template>

<style lang="scss" module>
@import './styles.scss';
</style>
